<template>
  <div class="container">
    <el-card shadow="always">
      <el-row :gutter="20">
           <el-col :span="8">
          <el-date-picker
          :clearable="false"
            v-model="query.time"
            @change="picker"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="query.accompanyType"
            placeholder="请选择用餐对象"
            clearable
          >
            <el-option
              v-for="item in ['家长', '负责人']"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="query.mealType"
            placeholder="请选择进餐餐次"
            clearable
          >
            <el-option
              v-for="item in ['早餐', '早点', '午餐', '午点', '晚餐']"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col>
      <el-col :span="3">
  <el-select v-model="query.taskStatus" placeholder="请选择陪餐状态" clearable>
            <el-option
              v-for='(item,index) in [ { text: "陪餐状态", value: "" },
      { text: "未陪餐", value: "0" },
      { text: "已陪餐", value: "1" },
      { text: "不需陪餐", value: "2" }]'              :key="index"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
          
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="query.page=1;getList()">搜索</el-button>
        </el-col>
              <el-col :span="2">

            <calendar classify="7" @view="viewMenu" name="陪餐管理日历"></calendar>
        </el-col>
      </el-row>
      <rz-height></rz-height>
      <el-table :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="taskDate" label="任务日期">
              <template slot-scope="scope">
     {{ scope.row.taskDate}}({{ scope.row.taskWeek}})
          </template>
        </el-table-column>
        <el-table-column prop="accompanyType" label="陪餐类型" width="180">
        </el-table-column>
        <el-table-column prop="mealType" label="陪餐餐次">
        </el-table-column>
        <el-table-column prop="accompanyingPerson" label="陪餐人"> </el-table-column>
        <el-table-column prop="mealTimeName" label="陪餐食谱"> </el-table-column>
           <el-table-column  label="陪餐状态"> 
            <template slot-scope="scope">

                 <div v-if="scope.row.taskStatus==0">暂未陪餐</div>
                <div v-else-if="scope.row.taskStatus==1">已陪餐</div>
                <div v-else>未陪餐原因:{{scope.row.completeExplain}}</div>
          </template>

        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="small" type="primary" v-if="scope.row.taskStatus==1" @click="viewMenu(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        @pagination="getList"
        :page.sync="query.page"
      />
      <rz-dialog
        :dialogVisible.sync="dialogVisible"
        :isShowConfirm="false"
        title="查看陪餐详情"
      >
        <el-form label-width="120px">


           <el-row>
          <el-col :span="12">
            <el-form-item label="陪餐时间"> {{ data.accompanyTime }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="陪餐类型">{{ data.accompanyType }}</el-form-item>
          </el-col>
        </el-row>


     <el-row>
          <el-col :span="12">
          <el-form-item label="陪餐餐次">
            {{ data.mealType }}
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="陪餐人"> {{ data.accompanyingPerson }} </el-form-item>
          </el-col>
        </el-row>


         
            <el-row>
          <el-col :span="12">
          <el-form-item label="陪餐食谱"> {{ data.mealTimeName }} </el-form-item>
          </el-col>
          <el-col :span="12">
           <el-form-item label="陪餐内容"> {{ data.planContent }} </el-form-item>
          </el-col>
        </el-row>
          
                <el-row>
          <el-col :span="12">
        <el-form-item label="陪餐地址"> {{ data.dinnerPartyPlace }} </el-form-item>
          </el-col>
          <el-col :span="12">
           <el-form-item label="问题/建议/意见"> {{ data.remark }} </el-form-item>
          </el-col>
        </el-row>
         
          <el-form-item label="陪餐图片">
            <el-image
              style="width: 150px; height: 150px;margin-right:10px"
              :src="data.imageUrl"
              fit="cover"
              :preview-src-list="[data.imageUrl]"
            ></el-image>
          </el-form-item>
        </el-form>
      </rz-dialog>
    </el-card>
  </div>
</template>
<script>
import  calendar from "@/views/enterprise/components/calendar";

import { QueryUnitAccoumpanyToEatList } from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
     this.query.startDate=this.$moment().subtract(1, 'month').format('YYYY-MM-DD')
    this.query.endDate=this.$moment().format('YYYY-MM-DD')
    this.query.time=[this.$moment().subtract(1, 'month').format('YYYY-MM-DD'),this.$moment().format('YYYY-MM-DD')]
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      dialogVisible: false,
      query: {
        date: 0,
        accompanyType: "",
        endDate: "",
        isPage: 0,
        mealType: "",
        page: 1,
        pageSize: 10,
        recipeName: "",
        startDate: "",
        unitId: sessionStorage.getItem("interpretation"),
         time: [],
         taskStatus:""
      },
     
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() > Date.now() ||
            time.getTime() < new Date("2021-01-01").getTime()
          );
        },
      },
      tableData: [],
      total: 0,
      data: {},
    };
  },
  // 方法
  methods: {
    picker(e) {
      if (e) {
        this.query.startDate = e[0];
        this.query.endDate = e[1];
      } else {
        this.query.startDate = "";
        this.query.endDate = "";
      }
    },
    getList() {
      QueryUnitAccoumpanyToEatList(this.query).then((res) => {
         res.data.forEach(x=> {
           for (const key in x) {
              if(!x[key]){
                x[key]='--'
              }
           }
         })
        this.tableData = res.data;
        this.total = res.totalCount;
      });
    },
    viewMenu(e) {
      this.data = e;
      this.dialogVisible = true;
    },
        tableRowClassName(e){
      console.log(e.row.taskWeek=='星期日');
      if(e.row.taskWeek=='星期日'||e.row.taskWeek=='星期六'){
         return 'warning-row';
      }else{
          return '';
      }
    }
  },
  // 监听属性
  watch: {},
  // 组件
  components: {calendar},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container{
 /deep/ .el-table .warning-row {
    background: oldlace;
  }
}

</style>